import React, { useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';

const mockGoods = [
  {
    id: 1,
    title: '福利门 非转基因纯正菜籽油5L/通非转基因',
    subtitle: '',
    tags: ['好货上新'],
    price: 58.8,
    oldPrice: 78.8,
    save: 5.1,
    img: '',
  },
  {
    id: 2,
    title: '精选春芽 100g/包',
    subtitle: '美味香椿嫩芽',
    tags: ['秒杀', '好货上新', '限购5份'],
    price: 58.8,
    oldPrice: 78.8,
    save: 5.1,
    img: '',
  },
  {
    id: 3,
    title: '进口牛奶 1L/盒',
    subtitle: '新鲜健康',
    tags: ['热卖'],
    price: 19.9,
    oldPrice: 25.9,
    save: 6.0,
    img: '',
  },
  {
    id: 4,
    title: '抽纸 3层*100抽',
    subtitle: '柔软亲肤',
    tags: ['热卖'],
    price: 9.9,
    oldPrice: 12.9,
    save: 3.0,
    img: '',
  },
  {
    id: 5,
    title: '血橙 500g',
    subtitle: '新鲜水果',
    tags: ['热卖'],
    price: 15.8,
    oldPrice: 19.8,
    save: 4.0,
    img: '',
  },
];

function useQuery() {
  return new URLSearchParams(useLocation().search);
}

export default function SearchResult() {
  const query = useQuery();
  const keyword = query.get('keyword') || '';
  const navigate = useNavigate();
  const [cart, setCart] = useState<{[id:number]:number}>({});

  // 根据关键字过滤商品
  const filteredGoods = mockGoods.filter(item =>
    item.title.includes(keyword) || item.subtitle?.includes(keyword)
  );

  // 加入购物车
  const addToCart = (id: number) => {
    setCart(prev => ({ ...prev, [id]: (prev[id] || 0) + 1 }));
  };

  // 购物车商品总数、总价、节省金额
  const cartCount = Object.values(cart).reduce((a, b) => a + b, 0);
  const cartGoods = filteredGoods.filter(good => cart[good.id]);
  const totalPrice = cartGoods.reduce((sum, good) => sum + (good.price * (cart[good.id] || 0)), 0);
  const totalSave = cartGoods.reduce((sum, good) => sum + (good.save * (cart[good.id] || 0)), 0);

  return (
    <div style={{ padding: 12, background: '#fafafa', minHeight: '100vh', paddingBottom: 80 }}>
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: 16 }}>
        <button onClick={() => navigate(-1)} style={{ fontSize: 18, marginRight: 12 }}>←</button>
        <h2 style={{ margin: 0 }}>搜索结果：{keyword}</h2>
      </div>
      {filteredGoods.length === 0 ? (
        <div style={{ color: '#bbb', textAlign: 'center', marginTop: 40 }}>暂无相关商品</div>
      ) : (
        filteredGoods.map(good => (
          <div key={good.id} style={{ display: 'flex', marginBottom: 18, background: '#fff', borderRadius: 8, padding: 10 }}>
            <div style={{ width: 80, height: 80, background: '#eee', borderRadius: 8, marginRight: 12, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              {/* 图片可替换 */}
              <img src={good.img || 'https://via.placeholder.com/60'} alt="" style={{ width: 60, height: 60, objectFit: 'cover' }} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 500, fontSize: 15, marginBottom: 4 }}>{good.title}</div>
              {good.subtitle && <div style={{ color: '#888', fontSize: 13, marginBottom: 4 }}>{good.subtitle}</div>}
              <div style={{ marginBottom: 4 }}>
                {good.tags.map((tag, i) => (
                  <span key={i} style={{
                    display: 'inline-block',
                    background: tag === '秒杀' ? '#fff0f0' : '#f5f5f5',
                    color: tag === '秒杀' ? '#ff4d4f' : '#ff4d4f',
                    borderRadius: 12,
                    padding: '2px 8px',
                    fontSize: 12,
                    marginRight: 6,
                    border: tag === '秒杀' ? '1px solid #ff4d4f' : 'none'
                  }}>{tag}</span>
                ))}
                <span style={{
                  display: 'inline-block',
                  background: '#ffeaea',
                  color: '#ff4d4f',
                  borderRadius: 12,
                  padding: '2px 8px',
                  fontSize: 12,
                  marginRight: 6
                }}>已省{good.save}元</span>
              </div>
              <div style={{ color: '#ff4d4f', fontWeight: 'bold', fontSize: 18 }}>
                ￥{good.price} <span style={{ color: '#bbb', fontSize: 14, textDecoration: 'line-through', marginLeft: 8 }}>￥{good.oldPrice}</span>
              </div>
            </div>
            <button
              onClick={() => addToCart(good.id)}
              style={{
                background: '#ff2d2d',
                color: '#fff',
                border: 'none',
                borderRadius: 20,
                padding: '8px 18px',
                fontSize: 16,
                marginLeft: 8,
                cursor: 'pointer'
              }}
            >
              加入购物车{cart[good.id] ? `(${cart[good.id]})` : ''}
            </button>
          </div>
        ))
      )}
      {/* 底部购物车栏 */}
      <div style={{
        position: 'fixed',
        left: 0,
        right: 0,
        bottom: 0,
        background: '#fff',
        borderTop: '1px solid #eee',
        display: 'flex',
        alignItems: 'center',
        height: 60,
        zIndex: 100,
        padding: '0 12px'
      }}>
        <div style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
          <div style={{ position: 'relative', marginRight: 18, fontSize: 28, color: '#bbb' }}>
            🛒
            {cartCount > 0 && (
              <span style={{
                position: 'absolute',
                top: -6,
                right: -10,
                background: 'red',
                color: '#fff',
                borderRadius: '50%',
                fontSize: 12,
                padding: '0 6px',
                minWidth: 18,
                textAlign: 'center',
                fontWeight: 600
              }}>{cartCount}</span>
            )}
          </div>
          <div>
            <div style={{ fontSize: 16 }}>总计：￥{totalPrice.toFixed(2)}</div>
            <div style={{ fontSize: 12, color: '#bbb' }}>为你节省：￥{totalSave.toFixed(2)}</div>
          </div>
        </div>
        <button
          style={{
            background: '#ff2d2d',
            color: '#fff',
            border: 'none',
            borderRadius: 24,
            padding: '10px 32px',
            fontSize: 18,
            fontWeight: 600,
            marginLeft: 8,
            cursor: 'pointer'
          }}
        >
          去下单{cartCount > 0 ? `(${cartCount})` : ''}
        </button>
      </div>
    </div>
  );
} 